<template>
  <ul class="icon-list">
      <li v-for="(item,index) of iconList" :key="index">
          <span>
            <component v-if="lmIcon" :is="lmIcon" class="demo-icon" :name="item" ></component>
            <span class="icon-name">{{item}}</span>
          </span>
      </li>
  </ul>
</template>

<script>
// import lmIcon from '../../../src/icon'
export default {
//   components: {
//       lmIcon
//   },
  mounted () {
    import('../../../src/icon').then(module => {
      console.log(module)
      this.lmIcon = module.default
    })
  },
  data() {
    return {
        lmIcon:null,
        iconList:[
            'yahoo-fill',
            'wechat-fill',
            'chrome-fill',
            'alipay-circle-fill',
            'aliwangwang-fill',
            'behance-circle-fill',
            'amazon-circle-fill',
            'codepen-circle-fill',
            'CodeSandbox-circle-f',
            'dropbox-circle-fill',
            'github-fill',
            'dribbble-circle-fill',
            'googleplus-circle-f',
            'medium-circle-fill',
            'QQ-circle-fill',
            'IE-circle-fill',
            'google-circle-fill',
            'dingtalk-circle-fill',
            'sketch-circle-fill',
            'slack-circle-fill',
            'twitter-circle-fill',
            'taobao-circle-fill',
            'weibo-circle-fill',
            'zhihu-circle-fill',
            'reddit-circle-fill',
            'alipay-square-fill',
            'dingtalk-square-fill',
            'CodeSandbox-square-f',
            'behance-square-fill',
            'amazon-square-fill',
            'codepen-square-fill',
            'dribbble-square-fill',
            'dropbox-square-fill',
            'facebook-fill',
            'googleplus-square-f',
            'google-square-fill',
            'instagram-fill',
            'IE-square-fill',
            'medium-square-fill',
            'linkedin-fill',
            'QQ-square-fill',
            'reddit-square-fill',
            'twitter-square-fill',
            'sketch-square-fill',
            'slack-square-fill',
            'taobao-square-fill',
            'weibo-square-fill',
            'zhihu-square-fill',
            'audio-fill',
            'robot-fill',
            'bug-fill',
            'signal-fill',
            'shortcut-fill',
            'check-circle-fill',
            'caret-down',
            'left-circle-fill',
            'backward',
            'down-circle-fill',
            'caret-up',
            'minus-circle-fill',
            'caret-right',
            'close-circle-fill',
            'caret-left',
            'info-circle-fill',
            'fast-backward',
            'up-circle-fill',
            'forward',
            'right-circle-fill',
            'fast-forward',
            'plus-circle-fill',
            'question-circle-fill',
            'EURO-circle-fill',
            'frown-fill',
            'copyright-circle-fil',
            'CI-circle-fill',
            'compass-fill',
            'Dollar-circle-fill',
            'poweroff-circle-fill',
            'meh-fill',
            'play-circle-fill',
            'Pound-circle-fill',
            'smile-fill',
            'stop-fill',
            'warning-circle-fill',
            'time-circle-fill',
            'trademark-circle-fil',
            'YUAN-circle-fill',
            'heart-fill',
            'piechart-circle-fil',
            'dashboard-fill',
            'message-fill',
            'check-square-fill',
            'down-square-fill',
            'minus-square-fill',
            'close-square-fill',
            'formatpainter-fill',
            'codelibrary-fill'
        ]
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  methods: {

  },
};
</script>

<style scoped>
ul{
    overflow: hidden;
    list-style: none;
    padding: 0!important;
    border: 1px solid #eaeefb;
    border-radius: 4px;
}
ul > li{
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul > li > span{
    line-height: normal;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    color: #99a9bf;
    transition: color .15s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
ul > li > span > .demo-icon{
    display: block;
    font-size: 32px;
    margin-bottom: 15px;
    color: #606266;
}
</style>
